<UserControl x:Class="FacebookClient.SearchViewControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Facebook="clr-namespace:Contigo;assembly=Contigo"
    xmlns:ClientManager="clr-namespace:ClientManager"
    xmlns:FacebookClient="clr-namespace:FacebookClient"
    xmlns:ClientManagerControls="clr-namespace:ClientManager.Controls"
    xmlns:ClientManagerView="clr-namespace:ClientManager.View"
    FocusVisualStyle="{x:Null}">
  
  <UserControl.Resources>
    <Style x:Key="SearchResultListBoxStyle" TargetType="{x:Type ListBox}">
      <Setter Property="BorderBrush" Value="{x:Null}"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
      <Setter Property="Background" Value="Transparent"/>
    </Style>
    
    <!-- Animated button containing an explorer node -->
    <Style x:Key="PhotoExplorerNodeButton" TargetType="{x:Type Button}">
      <Setter Property="Cursor" Value="Hand" />
      <Setter Property="FocusVisualStyle" Value="{x:Null}" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="ButtonBorder" RenderTransformOrigin="0.5,0.5" CornerRadius="7">
              <Border.RenderTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="1" ScaleY="1"/>
                </TransformGroup>
              </Border.RenderTransform>
              <ContentPresenter Focusable="False"/>
            </Border>
            <ControlTemplate.Triggers>
              <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                  <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}"  Value="True" />
                </MultiDataTrigger.Conditions>
                <MultiDataTrigger.EnterActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0400000" Value="1.3" KeySpline="0.125,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0700000" Value="1.2"/>
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0400000" Value="1.3" KeySpline="0.125,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0700000" Value="1.2"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </BeginStoryboard>
                </MultiDataTrigger.EnterActions>
                <MultiDataTrigger.ExitActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.2200000" Value="1.05" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.2200000" Value="1.05" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </BeginStoryboard>
                </MultiDataTrigger.ExitActions>
              </MultiDataTrigger>
              <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                  <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsKeyboardFocused}"  Value="True" />
                </MultiDataTrigger.Conditions>
                <MultiDataTrigger.EnterActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0400000" Value="1.3" KeySpline="0.125,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0700000" Value="1.2"/>
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0400000" Value="1.3" KeySpline="0.125,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0700000" Value="1.2"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </BeginStoryboard>
                </MultiDataTrigger.EnterActions>
                <MultiDataTrigger.ExitActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.2200000" Value="1.05" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.2200000" Value="1.05" KeySpline="0,0,0.875,1"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </BeginStoryboard>
                </MultiDataTrigger.ExitActions>
              </MultiDataTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <!-- DataTemplate for generic nodes display a string, like a simple search -->
    <DataTemplate DataType="{x:Type ClientManagerControls:PhotoExplorerBaseNode}">
      <Border x:Name="Root" CornerRadius="6" Background="#666666">
        <TextBlock Text="{Binding Path=Name}" Margin="13" Foreground="#FFFFFF" FontSize="{DynamicResource MiddleFontSize}" FontFamily="{DynamicResource SansSerifFont}" FontWeight="Bold"/>
      </Border>
    </DataTemplate>

    <!-- DataTemplate for explorer nodes that display a photo -->
    <DataTemplate DataType="{x:Type ClientManagerControls:PhotoExplorerPhotoNode}">
      <FacebookClient:PhotoButton
          Photo="{Binding Path=Photo.Image}"
          Command="ClientManagerControls:PhotoExplorerControl.SwitchCenterNodeCommand" 
          CommandParameter="{Binding}" 
          Style="{DynamicResource SmallPhotoButtonStyle}"/>
    </DataTemplate>

    <!-- DataTemplate for explorer nodes that display an album  -->
    <DataTemplate DataType="{x:Type ClientManagerControls:PhotoExplorerAlbumNode}">
      <FacebookClient:AlbumThumbnailButton 
          FacebookPhotoAlbum="{Binding Path=Album}"
          Command="ClientManagerControls:PhotoExplorerControl.SwitchCenterNodeCommand" 
          CommandParameter="{Binding}" />
    </DataTemplate>

    <!-- DataTemplate for explorer nodes that display a contact -->
    <DataTemplate DataType="{x:Type ClientManagerControls:PhotoExplorerContactNode}">
      <FacebookClient:FriendButton
          Style="{DynamicResource MediumFriendButtonStyle}" 
          Friend="{Binding Contact}"
          Command="ClientManagerControls:PhotoExplorerControl.SwitchCenterNodeCommand" 
          CommandParameter="{Binding}"/>
    </DataTemplate>

    <!-- DataTemplate for explorer nodes that display a status post  -->
    <DataTemplate DataType="{x:Type ClientManagerControls:PhotoExplorerPostNode}">
      <Button Command="ClientManagerControls:PhotoExplorerControl.SwitchCenterNodeCommand" CommandParameter="{Binding}" 
              Style="{StaticResource PhotoExplorerNodeButton}" Margin="2,6">
        <Border Background="{DynamicResource Background_ExplorerNode}" CornerRadius="7" Padding="5" Margin="2">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Image Source="../Resources/Images/Icons/feed_icon.png" Width="16" Height="16" Margin="3,0,6,0" />
            <TextBlock Grid.Column="1" Text="{Binding Post.Message}" Style="{DynamicResource MessageTextBlockStyle}" MaxWidth="200" Foreground="White" TextTrimming="CharacterEllipsis"/>
          </Grid>
        </Border>
      </Button>
    </DataTemplate>

    <!-- DataTemplate for explorer nodes that display a status comment  -->
    <DataTemplate DataType="{x:Type ClientManagerControls:PhotoExplorerCommentNode}">
      <Button Command="ClientManagerControls:PhotoExplorerControl.SwitchCenterNodeCommand" CommandParameter="{Binding}" 
                    Style="{StaticResource PhotoExplorerNodeButton}" Margin="2,6">
        <Border Background="#FFFFFF" CornerRadius="7" Padding="5" BorderBrush="{DynamicResource Border_CommentNode}" BorderThickness="1" 
                        Margin="2">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Image Source="../Resources/Images/Icons/comment_icon.png" Width="13" Height="13" Margin="3,0,6,0" />
            <TextBlock Grid.Column="1" Text="{Binding Comment.Text}" MaxWidth="200" Style="{DynamicResource MessageTextBlockStyle}" Foreground="Black" TextTrimming="CharacterEllipsis"/>
          </Grid>
        </Border>
      </Button>
    </DataTemplate>

    <!-- DataTemplate for explorer nodes that display a tag -->
    <DataTemplate DataType="{x:Type ClientManagerControls:PhotoExplorerTagNode}">
      <Button Command="ClientManagerControls:PhotoExplorerControl.SwitchCenterNodeCommand" CommandParameter="{Binding}" 
                    Style="{StaticResource PhotoExplorerNodeButton}" Margin="2,6">
        <Border Background="{DynamicResource Background_ExplorerNode}" CornerRadius="7" Padding="5" 
                        Margin="2">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Image Source="../Resources/Images/Icons/notes_icon.png" Width="16" Height="16" Margin="3,0,6,0" />
            <TextBlock Grid.Column="1" Text="{Binding Path=Name}" MaxWidth="200" FontWeight="Bold" 
                                   Foreground="#FFFFFF" TextTrimming="CharacterEllipsis"/>
          </Grid>
        </Border>
      </Button>
    </DataTemplate>
  </UserControl.Resources>
  
  <Grid>
    <Grid x:Name="SearchListView" DataContext="{Binding Path=.}">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid.RenderTransform>
        <ScaleTransform x:Name="ListViewTransform" ScaleX="1" ScaleY="1" />
      </Grid.RenderTransform>

      <DockPanel Grid.Row="0" Margin="10">
        <Button DockPanel.Dock="Right"
            Style="{DynamicResource StandardButtonStyle}"
            Height="26"
            Margin="2"
            VerticalAlignment="Top"
            Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type FacebookClient:SearchViewControl}}, Path=SwitchToPhotoExplorerCommand}">
          <TextBlock Margin="5,0,0,0"
              FontSize="{DynamicResource LargeFontSize1}"
              VerticalAlignment="Center"
              Text="Switch to explorer view"/>
        </Button>
        <TextBlock FontSize="{DynamicResource LargeFontSize2}" FontWeight="Bold" TextTrimming="CharacterEllipsis" Foreground="{DynamicResource Foreground_PromptText}">
          <TextBlock.Text>
            <MultiBinding StringFormat="{}Search Results for &quot;{0}&quot;">
              <Binding Path="SearchText"/>
            </MultiBinding>
          </TextBlock.Text>
        </TextBlock>
      </DockPanel>

      <FacebookClient:ScaleScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Visible" Style="{DynamicResource MainScaleScrollViewerStyle}" Margin="2">
        <StackPanel>
          <Expander>
            <Expander.Style>
              <Style TargetType="{x:Type Expander}">
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="IsExpanded" Value="True"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding Friends.Count}" Value="0">
                    <Setter Property="IsEnabled" Value="False"/>
                    <Setter Property="IsExpanded" Value="False"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </Expander.Style>
            <Expander.Header>
              <TextBlock Margin="5,0,0,0" FontSize="{DynamicResource LargeFontSize2}" FontFamily="{DynamicResource SansSerifFont}" Foreground="{DynamicResource Foreground_PromptText}">
                <TextBlock.Style>
                  <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Text">
                      <Setter.Value>
                        <Binding StringFormat="{}{0} friends" Path="Friends.Count"/>
                      </Setter.Value>
                    </Setter>
                    
                    <Style.Triggers>
                      <DataTrigger Binding="{Binding Path=Friends.Count}" Value="1">
                        <Setter Property="Text" Value="1 friend"/>
                      </DataTrigger>
                    </Style.Triggers>
                  </Style>
                </TextBlock.Style>
              </TextBlock>
            </Expander.Header>
            
            <ListBox Style="{StaticResource SearchResultListBoxStyle}"
                ItemsSource="{Binding Friends}"
                ItemTemplate="{DynamicResource FriendResultTemplate}" >
              <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                  <FacebookClient:AnimatingTilePanel ItemHeight="108" ItemWidth="108" Attraction="2.4" />
                </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
            </ListBox>
          </Expander>

          <Expander>
            <Expander.Style>
              <Style TargetType="{x:Type Expander}">
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="IsExpanded" Value="True"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding Comments.Count}" Value="0">
                    <Setter Property="IsEnabled" Value="False"/>
                    <Setter Property="IsExpanded" Value="False"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </Expander.Style>
            <Expander.Header>
              <TextBlock Margin="5,0,0,0" FontSize="{DynamicResource LargeFontSize2}" FontFamily="{DynamicResource SansSerifFont}" Foreground="{DynamicResource Foreground_PromptText}">
                <TextBlock.Style>
                  <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Text">
                      <Setter.Value>
                        <Binding StringFormat="{}{0} comments" Path="Comments.Count"/>
                      </Setter.Value>
                    </Setter>
                    
                    <Style.Triggers>
                      <DataTrigger Binding="{Binding Path=Comments.Count}" Value="1">
                        <Setter Property="Text" Value="1 comment" />
                      </DataTrigger>
                    </Style.Triggers>
                  </Style>
                </TextBlock.Style>
              </TextBlock>
            </Expander.Header>

            <ListBox Style="{StaticResource SearchResultListBoxStyle}"
                ItemsSource="{Binding Comments}"
                ItemTemplate="{DynamicResource CommentResultTemplate}" >
              <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                  <FacebookClient:AnimatingTilePanel ItemHeight="80" ItemWidth="400" Attraction="2.4" />
                </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
            </ListBox>
          </Expander>

          <Expander>
            <Expander.Style>
              <Style TargetType="{x:Type Expander}">
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="IsExpanded" Value="True"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding Posts.Count}" Value="0">
                    <Setter Property="IsEnabled" Value="False"/>
                    <Setter Property="IsExpanded" Value="False"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </Expander.Style>
            <Expander.Header>
              <TextBlock Margin="5,0,0,0" FontSize="{DynamicResource LargeFontSize2}" FontFamily="{DynamicResource SansSerifFont}" Foreground="{DynamicResource Foreground_PromptText}">
                <TextBlock.Style>
                  <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Text">
                      <Setter.Value>
                        <Binding StringFormat="{}{0} posts" Path="Posts.Count"/>
                      </Setter.Value>
                    </Setter>
                    
                    <Style.Triggers>
                      <DataTrigger Binding="{Binding Path=Posts.Count}" Value="1">
                        <Setter Property="Text" Value="1 post"/>
                      </DataTrigger>
                    </Style.Triggers>
                  </Style>
                </TextBlock.Style>
              </TextBlock>
            </Expander.Header>

            <ListBox Style="{StaticResource SearchResultListBoxStyle}"
                ItemsSource="{Binding Posts}"
                ItemTemplate="{DynamicResource PostResultTemplate}" >
              <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                  <FacebookClient:AnimatingTilePanel ItemHeight="80" ItemWidth="400" Attraction="2.4" />
                </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
            </ListBox>
          </Expander>

          <Expander>
            <Expander.Style>
              <Style TargetType="{x:Type Expander}">
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="IsExpanded" Value="True"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding Photos.Count}" Value="0">
                    <Setter Property="IsEnabled" Value="False"/>
                    <Setter Property="IsExpanded" Value="False"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </Expander.Style>

            <Expander.Header>
              <TextBlock Margin="5,0,0,0" FontSize="{DynamicResource LargeFontSize2}" FontFamily="{DynamicResource SansSerifFont}" Foreground="{DynamicResource Foreground_PromptText}">
                <TextBlock.Style>
                  <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Text">
                      <Setter.Value>
                        <Binding StringFormat="{}{0} photos" Path="Photos.Count"/>
                      </Setter.Value>
                    </Setter>
                    
                    <Style.Triggers>
                      <DataTrigger Binding="{Binding Path=Photos.Count}" Value="1">
                        <Setter Property="Text" Value="1 photo"/>
                      </DataTrigger>
                    </Style.Triggers>
                  </Style>
                </TextBlock.Style>
              </TextBlock>
            </Expander.Header>

            <ListBox Style="{StaticResource SearchResultListBoxStyle}"
                ItemsSource="{Binding Photos}"
                ItemTemplate="{DynamicResource PhotoResultTemplate}" >
              <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                  <FacebookClient:AnimatingTilePanel ItemHeight="90" ItemWidth="90" Attraction="2.4" />
                </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
            </ListBox>
          </Expander>

          <Expander>
            <Expander.Style>
              <Style TargetType="{x:Type Expander}">
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="IsExpanded" Value="True"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding Albums.Count}" Value="0">
                    <Setter Property="IsEnabled" Value="False"/>
                    <Setter Property="IsExpanded" Value="False"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </Expander.Style>

            <Expander.Header>
              <TextBlock Margin="5,0,0,0" FontSize="{DynamicResource LargeFontSize2}" FontFamily="{DynamicResource SansSerifFont}" Foreground="{DynamicResource Foreground_PromptText}">
                <TextBlock.Style>
                  <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Text">
                      <Setter.Value>
                        <Binding StringFormat="{}{0} albums" Path="Albums.Count"/>
                      </Setter.Value>
                    </Setter>
                    
                    <Style.Triggers>
                      <DataTrigger Binding="{Binding Path=Albums.Count}" Value="1">
                        <Setter Property="Text" Value="1 album"/>
                      </DataTrigger>
                    </Style.Triggers>
                  </Style>
                </TextBlock.Style>
              </TextBlock>
            </Expander.Header>

            <ListBox Style="{StaticResource SearchResultListBoxStyle}" ItemsSource="{Binding Albums}" >
              <ListBox.ItemTemplate>
                <DataTemplate DataType="{x:Type Facebook:FacebookPhotoAlbum}">
                  <FacebookClient:AlbumThumbnailButton 
                    FacebookPhotoAlbum="{Binding}"
                    Click="OnNavigateToContentButtonClicked" 
                    ClientManagerView:ViewManager.NavigationContent="{Binding}" />
                </DataTemplate>
              </ListBox.ItemTemplate>
              <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                  <FacebookClient:AnimatingTilePanel ItemWidth="210" ItemHeight="180" Attraction="2.4" />
                </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
            </ListBox>
          </Expander>
         
        </StackPanel>
      </FacebookClient:ScaleScrollViewer>
    </Grid>

    <Grid x:Name="PhotoExplorerGrid" Visibility="Collapsed" >
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <DockPanel Grid.Row="0" Margin="10">
        <Button DockPanel.Dock="Right"
            Style="{DynamicResource StandardButtonStyle}"
            Height="26"
            Margin="2"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"
            Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type FacebookClient:SearchViewControl}}, Path=SwitchToListViewCommand}">
          <TextBlock Margin="5,0,0,0"
              FontSize="{DynamicResource LargeFontSize1}"
              VerticalAlignment="Center"
              Text="Switch to list view"/>
        </Button>
      </DockPanel>

      <ClientManagerControls:PhotoExplorerControl 
          x:Name="PhotoExplorer" 
          Grid.Row="1"
          FocusVisualStyle="{x:Null}" 
          Focusable="True" 
          KeyboardNavigation.IsTabStop="False" 
          LinePen="{DynamicResource Pen_ExplorerNodes}"/>
    </Grid>
  </Grid>
</UserControl>
